<template>
    <div id="app">

        <van-popup v-model="showDatePicker" position="bottom" :overlay="true">
            <van-datetime-picker
                    @confirm="changeDate"
                    @cancel="cancel"
                    v-model="currentDate"
                    :type="dateFormat"
            ></van-datetime-picker>
        </van-popup>
        <van-popup v-model="showIframe" class="modal-content" position="right">
            <van-nav-bar :title="frameOptions.title" left-text="关闭" @click-left="showIframe = false"></van-nav-bar>
            <iframe :src="frameOptions.url" class="page-content" frameborder='0' name="_blank"></iframe>
            <van-row>
                <van-col :key="item.text" :span="24/frameOptions.buttons.length" v-for="item in frameOptions.buttons">
                    <button class="bottom-btn" @click="frameButtonClick(item)" :class="item.style">{{item.text}}
                    </button>
                </van-col>
            </van-row>
        </van-popup>
        <van-popup :key="item.id" v-for="item in customFrames" v-model="item.showPopup" :overlay="false"
                   position="right">
            <van-nav-bar :title="item.title" left-text="关闭" @click-left="item.showPopup = false"></van-nav-bar>
            <iframe :src="item.url" class="page-content no-button" frameborder='0' name="_blank"></iframe>
        </van-popup>
        <van-popup :key="item.id" v-for="item in filesTargets" v-model="item.showFilesManager" :overlay="false"
                   position="right">
            <div class="file-manager-container">
                <!--<div class="title">附件管理</div>-->
                <van-nav-bar title="附件管理" left-text="关闭" @click-left="item.showFilesManager = false"></van-nav-bar>
                <van-notice-bar
                        text="点击按钮上传附件，右滑点击删除附件"
                ></van-notice-bar>
                <div class="file-list">
                    <!--:file-type="changeFileType(file.GUID)"-->
                    <oa-file-item :guid="file.GUID" @deleteItem="deleteFileItem(item,file,index)" :key="file.GUID"
                                  :file-type="changeFileType(file.GUID)"
                                  :file-name="file.FILENAME" :file-size="file.SIZE"
                                  v-for="(file,index) in item.filesList"/>
                </div>

                <button class="button-upload">
                    <van-uploader :after-read="onRead">
                        <i class="iconfont oa-add"></i>
                    </van-uploader>
                </button>
            </div>
        </van-popup>

        <div class="button-group">
            <!--<van-stepper  :min="0.5" :max="40" :step="0.5"/>-->
            <van-button :key="item.id" v-for="item in bottomButtons" style="margin-bottom: 12px;" size="large"
                        :type="item.type"
                        @click="item.callback(item)">{{item.name}}
            </van-button>
            <van-actionsheet v-model="actionShow" :actions="actions" cancel-text="取消"/>
        </div>
        <button @click="actionShow = true" class="more-button" v-if="actions.length > 0">
            <i class="iconfont oa-more"></i>
        </button>
    </div>
</template>

<script>


    import OaFileItem from "../components/OaFileItem";

    export default {
        name: 'Index',
        components: {OaFileItem},
        data() {
            return {
                frameOptions: {
                    url: "",
                    title: "",
                    buttons: []
                },
                form: null,
                customFrames: [],
                showDatePicker: false,
                showFilesManager: false,
                dateFormat: "date",
                currentDate: null,
                target: null,
                formData: null,
                formInfos: null,
                tableInfos: {},
                filesTargets: [],

                currentFileTarget: {},
                actionShow: false,
                formSaveGuid: null,
                showIframe: false,
                frameUrl: "",
                search: "",
                fileEdit: false,
                right_action: "编辑",
                saved: true,
                isEdit: true,
                isNew: null,
                lastDatas: null,

                ajaxFn: [],
                lastClickButton: "",
                bottomButtons: [],
                actions: [
                    {
                        name: '查看流程图',
                        className: 'blue-text',

                    },
                    {
                        name: '保存',
                        className: "success-text"
                    },
                    {
                        name: '终止',
                        className: 'red-text'
                    },
                    {
                        name: '删除',
                        className: 'red-text'
                    },
                ]
            }

        },
        methods: {
            frameButtonClick(item) {
                if (item.close) {
                    this.showIframe = false
                }
                if (item.click) {
                    item.click()
                }
            },
            deleteFileItem(item, file, index) {
                item.filesList.splice(index, 1)
                let ids = item.filesList.map((it) => {
                    return it.GUID
                }).join(",")
                let selector = "[dcqtech_data='" + item.id + "']"
                $("[dcqtech_id=" + item.id + "] .files-tips").text("共" + item.filesList.length + "个附件")
                $(selector).val(ids)
            },
            changeFileType(fileType) {
                let ext = fileType.substring(fileType.lastIndexOf("."), fileType.length)
                return ext.substring(1, ext.length)
            },
            actionSheetClick(item) {
                this.actionShow = false
                switch (item.name) {
                    case "查看流程图":
                        window.wf_form_viewworkflow()
                        break;
                    case "删除":
                        window.wf_form_remove()
                        break;
                    case "终止":
                        window.wf_form_stop()
                        break;
                    default:
                        break;
                }
            },
            changeDatePicker(picker) {
                console.log(picker)
            },
            changeDate(value) {
                console.log(value)
                this.showDatePicker = false
                let date = moment(value)
                let formater = "L"
                let format = date.format(formater)
                console.log(format)
                $(this.target).val(format)
            },
            cancel() {
                this.showDatePicker = false
            },
            onRead(file) {

                console.log(file)
                upload(file.file)
            }
        }
    }
</script>

<style lang="less">
    .van-popup--right {
        width: 100%;
        height: 100%;
    }

    body {
        background: #f0f0f0;
    }

    .page-content {
        width: 100%;
        height: calc(100% - 50px - 46px);
        &.no-button {
            height: calc(100% -  46px);
        }
    }



    .bottom-btn {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: none;
        color: white;
        width: 100%;
        background: #4b0;
        &:active {
            background: darken(#4b0, 5%)
        }
        &.danger {
            background: #ff3516;
            &:active {
                background: darken(#ff3516, 5%)
            }
        }
    }

    #udf_wf_form {
        margin-top: 20px;
        margin-bottom: 20px;
        .row {
            background: #fff;
        }
        p > span {
            margin: 0;
            font-weight: 400;
            font-size: 14px;
            color: rgba(69, 90, 100, .6);
            padding: 15px 15px;
        }

        .form-group {
            width: 100%;
            display: block;
            line-height: 24px;
            position: relative;
            color: #333;
            font-size: 14px;
            overflow: hidden;
            flex-wrap: wrap;
            height: auto;
            div {
                &.col-xs-12 {
                    width: calc(65% - 30px);
                    background: #ffffff;
                    line-height: 24px;
                    float: left;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: 0 15px;
                    position: relative;
                    &.iframe-cell {
                        height: 44px;
                        .tips {
                            color: #888888;
                            font-size: 12px;
                            margin-right: 10px;
                            margin-left: auto;
                        }
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        /*left: 0;*/
                        /*width: 200%;*/
                        height: 200%;
                        -webkit-transform-origin: 0 0;
                        transform-origin: 0 0;
                        pointer-events: none;
                        box-sizing: border-box;
                        border: 0 solid #e5e5e5;
                        left: -50%;
                        right: 0;
                        width: auto;
                        -webkit-transform: scale(1, .5);
                        transform: scale(1, .5);
                        border-bottom-width: 1px;
                    }
                    > input[type=text] {
                        flex: 1;
                        margin: 8px 0px;
                        height: 36px;
                        padding: 0 10px;
                        text-align: right;
                    }
                    > input[type=number] {
                        flex: 1;
                        margin: 8px 0;
                        height: 36px;
                        padding: 0 10px;
                        text-align: right;
                    }
                    > input {
                        &:disabled {
                            background: #f0f0f0;
                        }
                        &:required::before {
                            content: '*';
                            position: absolute;
                            left: -50%;
                            font-size: 14px;
                            color: #f44;
                            z-index: 1000;
                        }
                    }
                    > select {
                        margin: 8px 0;
                        border: none;
                        text-align: right;
                    }
                    > textarea {
                        flex: 1;
                        padding: 12px 12px;
                        border: none;
                        font-size: 14px;
                        &:disabled {
                            background: #f0f0f0;
                        }
                    }
                }
            }
            .input-group {
                float: right;
            }
            .fileinput-button {
                float: left;
                display: none;
                position: relative;
                margin-bottom: 8px;
                margin-right: 8px;
                width: 40px;
                height: 40px;
                border: 1px solid #D9D9D9;
                &::before {
                    content: " ";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 2px;
                    height: 20px;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    background-color: #D9D9D9;
                }
                &::after {
                    content: " ";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    background-color: #D9D9D9;
                    width: 20px;
                    height: 2px;
                }
            }
        }
        .form-group .file-cell {
            height: 44px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .files-tips {
                color: #888888;
                font-size: 12px;
                margin-right: 10px;
                margin-left: auto;
            }
        }

        .picker-cell {
            &:active {
                background: darken(#fff, 5%);
            }
        }

        .form-group input[type=file] {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .form-group .list-group {
            display: none;
            flex-direction: row;
            width: 100%;
            flex-wrap: wrap;
            height: 200px;

        }

        .col-xs-12 {
            flex: 1;
        }

        .form-group .control-label {
            width: calc(35% - 30px);
            float: left;
            display: block;
            line-height: 46px;
            padding: 0px 15px;
            /*border-bottom: solid 1px #e5e5e5;*/
            color: rgba(69, 90, 100, .6);
        }

        .form-group .control-label.required::before {
            content: '*';
            position: absolute;
            left: 7px;
            font-size: 14px;
            color: #f44;
        }

        input::-webkit-input-placeholder {
            color: #888888;
        }

        textarea::-webkit-input-placeholder {
            color: #888888;
        }

    }

    .more-button {
        position: fixed;
        top: 14px;
        right: 16px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        .oa-more {
            font-size: 24px;
            color: #ffffff;
        }
    }

    .file-manager-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f0f0f0;
        .title {
            font-size: 16px;
            color: #ffffff;
            background: #00a5e0;
            font-weight: normal;
            line-height: 44px;
            text-align: center;
            .aciton-close {

            }
        }
        .file-list {
            height: calc(100% - 46px - 38px);
            overflow: auto;
        }
        .button-upload {
            background: #00a5e0;
            width: 60px;
            position: fixed;
            right: 16px;
            bottom: 64px;
            height: 60px;
            border: none;
            border-radius: 50%;
            box-shadow: #dddddd 1px 2px 2px 1px;
            &:active {
                background: darken(#00a5e0, 5%);
            }
            .oa-add {
                color: #ffffff;
                font-size: 24px;
            }
        }
        .bottom-button {

        }
    }

    .success-text {
        color: #00aa00;
    }

    .red-text {
        color: #f43530;
    }

    .blue-text {
        color: #00a5e0;
    }

    div {
        &.col-xs-12 {
            padding: 15px;
            display: block;
        }
    }

    .button-group {
        margin: 12px;
    }

    .loading-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .loading-container .loading-text {
        font-size: 14px;
        color: #666666;
        margin-top: 10px;
    }


</style>
